﻿@using Inovout.Kuajing.Exports.Models
@model Inovout.Kuajing.Exports.Models.TraditionalOrder
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section styles {
    <link href="~/Content/themes/base/autocomplete.css" rel="stylesheet" />
    <link href="~/Scripts/media/css/jquery.dataTables.min.css" rel="stylesheet" />
    <style>
        .form form {
            margin: 20em auto;
        }

        .commodityForm {
            margin-top: 3em;
        }

            .commodityForm select {
                max-width: 280px;
            }
    </style>
}

@section scriptsHead {
    <script src="~/Scripts/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script>

        function handleText(self) {
            $(self).hide();
            var parent = $(self).parent("td");
            var labelnode = parent.find("label");
            if (labelnode != null) {
                labelnode = $("<label>").attr('for', $(self).attr("id"));
                parent.append(labelnode);
            }
            labelnode.text("");
            labelnode.text($(self).val());
            labelnode.on('dblclick', function () {
                $(self).show();
                labelnode.hide();
            })
        }

        var table;
        var PageManager = {};
        function deleteRow(self) {
            table.row('.selected').remove().draw(false);
            //var parent = $(self).parents("tr");
            //parent.remove();
            return false;
        }

        function createCommodity(item) {
            debugger;
            var control = $(item).find("label");
            if (typeof (control.val()) == "undefined") {
                control = $(item).find("input");
                if (typeof (control.val()) == "undefined") {
                    return $(item).text();
                } else {
                    return control.val();
                }
            } else {
                return control.text();

            }
        }


        $(document).ready(function () {
            table = $('#example').DataTable({
                "bPaginate": false,
                "bFilter": false,
                "sPaginationType": "bootstrap",
                "columns": [
            { "width": "60px" },
            { "width": "80px" },
            { "width": "60px" },
            { "width": "60px" },
            { "width": "60px" },
            { "width": "100px" },
            { "width": "100px" },
            { "width": "80px" },
            { "width": "60px" },
            { "width": "60px" },
            { "width": "60px" },
                ]
            });



            $('#example tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                }
                else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
            });



            var counter = 1;
            //初始化表格
            $.ajax({
                url: '@Url.Action("GetAllCommidities", "Commodity")',
                type: "POST",
                dataType: "json",
                //data: { exporterId: $("#exporterID").val() },
                data: { orderId: $("#orderId").val() },
                success: function (data) {
                    $.each(data, function (i, item) {
                        table.row.add([
                                     counter,
                                     item.BM,
                                     item.PM,
                                     item.XH,
                                     item.PL,
                                     '<input type="hidden" value="' + item.BrawerCode + '" /><input class="drawer" id="row-' + counter + '-drawer" style="width:100px" name="row-' + counter + '-drawer" value="' + item.Brawer + '"  type="text">',
                                     '<input id="row-' + counter + '-num-unit"style="width:80px" name="row-' + counter + '--num-unit" value="3/美元"  type="text">',
                                     '<input id="row-' + counter + '-packNum"style="width:60px" name="row-' + counter + '-packNum" value="3"  type="text"  check-type="required" required-message="数量不能为空！"> ',
                                     '<input id="row-' + counter + '-price" style="width:60px" name="row-' + counter + '-price" value="4" type="text">',
                                     '<input id="row-' + counter + '-sum" style="width:60px" name="row-' + counter + '-sumprice" value="23" type="text">',
                                     '<input type="hidden" value="' + item.Id + "," + item.orderItemId + '" /><input type="button" class="delete"  value="删除"/>'
                        ]).draw();
                        counter++;
                    }); 
                    PageManager.autoComplete();
                    PageManager.bindDelete();
                },
                error: function (jqXHR, textStatus, errorThrown) {

                }
            })


            $('#commiditySubmit').click(function () {

                //$(this).validation();
                debugger;
                var data = table.$('label,input, select').serialize();
                var commodities = new Array();


                $("table tbody tr").each(function (i, item) {
                    var commodity = {};

                    $(item).find("td").each(function (i, item) {

                        if (i == 1) {
                            //编号
                            var code = createCommodity(item);
                            commodity.code = code;
                        }
                        if (i == 2) {
                            //品名
                            var name = createCommodity(item);
                            commodity.name = name;
                        }
                        if (i == 3) {
                            //型号
                            var model = createCommodity(item);
                            commodity.model = model;
                        }
                        if (i == 4) {
                            //品牌
                            var brand = createCommodity(item);
                            commodity.brand = brand;
                        }
                        if (i == 5) {
                            //开票人
                            var hidden = $(item).find(":hidden");
                            var textInput = $(item).find("input[type='text']");
                            commodity.brawer = textInput.val();
                            commodity.brawerCode = hidden.val();
                        }
                        if (i == 6) {
                            //数量和单位
                            var numunit = createCommodity(item);
                            commodity.CommodityNum = numunit.split("/")[0];
                            commodity.Unit = numunit.split("/")[1];;
                        }
                        if (i == 7) {
                            //包装件数
                            var packNum = createCommodity(item);
                            commodity.packNum = packNum;
                        }
                        if (i == 8) {
                            //单价
                            var price = createCommodity(item);
                            commodity.price = price;
                        }
                        if (i == 9) {
                            //金额
                            var sum = createCommodity(item);
                            commodity.sum = sum;
                        }
                        if (i == 10) {
                            //commodityId
                            debugger;
                            var hidden = $(item).find(":hidden");
                            var Ids = hidden.val();
                            commodity.CommodityId = Ids.split(",")[0];
                            commodity.OrderItemId = Ids.split(",")[1];
                        }
                    })
                    commodities.push(commodity);
                })

                $("#commodities").val(JSON.stringify(commodities));
            });





            $('#addCommdity').on('click', function () {
                table.row.add([
                                     counter,
                                     '<input id="row-' + counter + '-ID" style="width:60px" name="row-' + counter + '-ID" onblur="handleText(this)" value="223"  type="text">',
                                     '<input id="row-' + counter + '-PM" style="width:60px" name="row-' + counter + '-PM" onblur="handleText(this)" value="ss"  type="text">',
                                     '<input id="row-' + counter + '-XH" style="width:60px" name="row-' + counter + '-XH" onblur="handleText(this)" value="xh"  type="text">',
                                     '<input id="row-' + counter + '-PL" style="width:60px" name="row-' + counter + '-PL" onblur="handleText(this)" value="pl"  type="text">',
                                     '<input type="hidden" value="0" /><input class="drawer" id="row-' + counter + '-drawer" style="width:100px" name="row-' + counter + '-drawer"  value="王三"  type="text">',
                                     '<input id="row-' + counter + '-num-unit"style="width:80px" name="row-' + counter + '--num-unit"  value="3/美元"  type="text">',
                                     '<input id="row-' + counter + '-packNum"style="width:60px" name="row-' + counter + '-packNum" value="3"  type="text">',
                                     '<input id="row-' + counter + '-price" style="width:60px" name="row-' + counter + '-price"  value="4" type="text">',
                                     '<input id="row-' + counter + '-sum" style="width:60px" name="row-' + counter + '-sumprice"  value="23" type="text">',
                                    '<input type="hidden" value="0,0" /><input type="button" class="delete" value="删除"  />'
                ]).draw();
                counter++;
                PageManager.autoComplete();
                PageManager.bindDelete();
            });


            PageManager.bindDelete = function () {
                $('.delete').on('click', function () {
                    //table.row('.selected').remove().draw(false);
                    table.row($(this).parents('tr')).remove().draw(false);
                    //table.row("").remove().draw(false);
                    //var parent = $(self).parents("tr");
                    //parent.remove();
                    //return false;
                })
            }


            PageManager.autoComplete = function () {
                $(".drawer").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: '@Url.Action("FilterDrawer", "Drawer")',
                            type: "POST",
                            dataType: "json",
                            data: { term: request.term, Id: $("#exporterID").val() },
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return {
                                        label: item.label,
                                        value: item.value
                                    };
                                }))
                            }
                        })
                    },
                    focus: function (event, ui) {
                        $(this).val(ui.item.label);
                        return false;
                    },
                    minLength: 2,
                    select: function (event, ui) {
                        $(this).val(ui.item.label);
                        $(this).parent("td").find(":hidden").val(ui.item.value);
                        return false;
                    }
                });
            };

            // PageManager.autoComplete();


            //$("#hidePackageDescribe").val();
            var describ = $("#hidePackageDescribe").val();
            debugger;
            if (describ) {
                $("#selectPackageDescribe").val(describ);
            } else {         
                $("#selectPackageDescribe").val(1);
            }
            $('#selectPackageDescribe').on('change', function () {
                $("#hidePackageDescribe").val($("#selectPackageDescribe option:selected").val());
            });

        });

    </script>
}

<div>
         @using (Html.BeginForm("LocateCommodity", "TraditionalOrder", FormMethod.Post, new { @class = "form-horizontal commodityForm" }))
    { 
        <div class="form-group">
            @Html.LabelFor(model => model.TradeCurrency, "交易币种", new { @for = "TradeCurrency", @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.TradeCurrency, (SelectList)ViewData["currencies"], new { @class = "form-control" })
                @Html.HiddenFor(model => model.Id, new  {@id="orderId" })
                @Html.Hidden("commodities", new { @id = "commodities" })
                @Html.HiddenFor(model => model.Exporter.Id, new { @id = "exporterID" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.PriceRule, "价格条款", new { @for = "Country", @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @{
                    var selectList = (SelectList)ViewData["rules"];
                    foreach (var radioButton in selectList)
                    {
                        if (radioButton.Text == "FOB")
                        {
                    <label class="radio-inline">
                        @Html.RadioButtonFor(model => model.PriceRule, radioButton.Value, new { Checked = "checked" }) @radioButton.Text
                    </label>
                    
                        }
                        else
                        {
                    <label class="radio-inline">
                        @Html.RadioButtonFor(model => model.PriceRule, radioButton.Value)@radioButton.Text
                    </label>
                        }
                    }
                }
            </div>
        </div>
        <div class="form-group">
            <input type="button" id="addCommdity" value="添加商品" />
        </div>
        <div class="form-group">
            <table id="example" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>产品编号</th>
                        <th>品名</th>
                        <th>型号</th>
                        <th>品类</th>
                        <th>开票人</th>
                        <th>数量和单位</th>
                        <th>包装件数</th>
                        <th>单价</th>
                        <th>金额</th>
                        <th>操作</th>
                    </tr>
                </thead>

                <tbody>
                </tbody>
            </table>

        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.PackageDescribe, "整体包装说明", new { @for = "Address", @class = "col-md-2 control-label" })
            <div class="col-md-10">
                <select class="form-control" name="PackageDescribe" id="selectPackageDescribe">
                    @{
                        <option value="1">纸箱</option>
                        <option value="2">木托</option>
                        <option value="3">纸箱+木托</option>
                    }
                </select>
                @Html.HiddenFor(model => model.PackageDescribe, new {@id="hidePackageDescribe" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.PackageNum, "整体包装件数", new { @for = "PackageNum", @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.TextBoxFor(mode => mode.PackageNum, new { @class = "form-control" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" id="commiditySubmit" class="btn btn-default" value="下一步" />
            </div>
        </div>

         }
</div>
